<!DOCTYPE html>
<html>
<head>
	<title>吸毒人员信息采集系统</title>
	<meta charset="UTF-8"> <!-- 设置字符集为UTF-8，以支持中文 -->
	<style>
		body {
			background-image: url("./index/bg.jpg");
			background-size: cover;
			background-position: center;
			color: #FFFFFF;
			font-size: 30px;
			font-weight: bold;
			text-align: center;
			position: relative;
			overflow: hidden;
		}

		form {
		    opacity: 0.8;
			background-color: #FFFFFF;
			padding: 40px;
			width: 600px;
			margin: 50px auto;
			border-radius: 10px;
			box-shadow: 0 0 20px rgba(0,0,0,0.2);
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
			border-top: 8px solid #3F51B5;
			border-bottom: 8px solid #3F51B5;
		}

		input[type="text"], input[type="password"] {
			padding: 12px;
			width: 100%;
			border-radius: 5px;
			border: none;
			margin-top: 20px;
			margin-bottom: 30px;
			box-sizing: border-box;
			background-color: #F5F5F5;
			border: 2px solid #BDBDBD;
			transition: all 0.3s ease-in-out;
			outline: none;
			font-size: 16px;
			color: #333333;
		}

		input[type="text"]:focus, input[type="password"]:focus {
			border-color: #3F51B5;
		}

		input[type="submit"] {
			background-color: #3F51B5;
			color: #FFFFFF;
			padding: 15px 20px;
			border: none;
			border-radius: 5px;
			margin-top: 30px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			font-size: 18px;
			font-weight: bold;
			letter-spacing: 1px;
			text-transform: uppercase;
			box-shadow: 0 4px 4px rgba(0,0,0,0.2);
		}

		input[type="submit"]:hover {
			background-color: #1A237E;
		}

		h2 {
			text-align: center;
			margin-bottom: 40px;
			color: #3F51B5;
			font-size: 28px;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		#background {
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: linear-gradient(45deg, #1E88E5, #3F51B5, #E91E63, #F44336);
			z-index: -1;
			animation: background 20s ease-in-out infinite;
		}

		@keyframes background {
			0% {
				transform: rotate(0deg);
			}
			50% {
				transform: rotate(180deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
		a:hover {
			color: red;
		}
		a{
			color: black;
		}
	</style>
</head>
<body>
	<form method="post" action="/login">
		<h2 style="font-size: 5vh;">吸毒人员信息采集系统</h2>
		<input type="text" id="username" name="username" placeholder="警员编号" required> <!-- 设置用户名输入框 -->
		<input type="password" id="password" name="password" placeholder="密码" required> <!-- 设置密码输入框 -->
		<input type="submit" value="登录"> <!-- 设置提交按钮 -->
		<a href="/register">注册</a>
	</form>
</body>
</html>
